<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />

    

    

    <title>react-redux的使用 | 郑礼德技术栈</title>
    <meta name="author" content="郑礼德" />
    <meta name="keywords" content="" />
    <meta name="description" content="本文如何搭建react-redux 以及使用方式搭建项目使用脚手架创建项目create-react-app react-redux-demo01安装依赖yarn add antd 安装蚂蚁金服ui 框架yarn add redux 安装 redux  yarn add react-redux 安装react-redux使用antd在 index.css 引入 @import &amp;#39;~antd/dist/antd.css&amp;#39;;redux 使用创建 storeimp..." />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    
    <link rel="alternate" href="/homepage/atom.xml" title="郑礼德技术栈" type="application/atom+xml">
    
    
    <link rel="icon" href="/homepage/images/favicon.ico">
    

    <style type="text/css">
    @font-face {
        font-family: 'icomoon';
        src: url("/homepage/fonts/icomoon.eot?q628ml");
        src: url("/homepage/fonts/icomoon.eot?q628ml#iefix") format('embedded-opentype'),
             url("/homepage/fonts/icomoon.ttf?q628ml") format('truetype'),
             url("/homepage/fonts/icomoon.woff?q628ml") format('woff'),
             url("/homepage/fonts/icomoon.svg?q628ml#icomoon") format('svg');
        font-weight: normal;
        font-style: normal;
    }
    </style>
    
<link rel="stylesheet" href="/homepage/css/style.css">


    <!--[if lt IE 9]>
    <style type="text/css">
    .nav-inner {top:0;}
    .author-meta {position:static;top:0;}
    .search-form {height:36px;}
    </style>
    <script type="text/javascript" src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <![endif]-->
<meta name="generator" content="Hexo 4.2.0"></head>
<body>

    <main class="app">
        <header id="header" class="header clearfix">
    <div id="nav" class="nav">
    <div class="nav-mobile">
        <button id="open-panel" class="open-panel nav-mobile-item"><i class="icon-documents"></i></button>
        <h1 class="nav-mobile-title nav-mobile-item">郑礼德技术栈</h1>
        <button id="open-menus" class="open-panel nav-mobile-item"><i class="icon-library"></i></button>
    </div>

    <nav id="nav-inner" class="nav-inner">
        
            <a class="nav-item" href="/homepage/">
                <span class="nav-text">首页</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/front-end">
                <span class="nav-text">前端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/back-end">
                <span class="nav-text">后端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/linux">
                <span class="nav-text">linux部署</span>
            </a>
        
            <a class="nav-item" href="/homepage/tags">
                <span class="nav-text">标签</span>
            </a>
        
            <a class="nav-item" href="/homepage/archives">
                <span class="nav-text">归档</span>
            </a>
        
            <a class="nav-item" href="/homepage/about">
                <span class="nav-text">关于</span>
            </a>
        
    </nav>
</div>

    <aside id="aside" class="aside">
    <div id="aside-mask" class="aside-mask"></div>
    <div id="aside-inner" class="aside-inner">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"><i class="icon-search-stroke"></i></button><input type="hidden" name="sitesearch" value="http://zhenglide.gitee.io/homepage"></form>

        
        
        
        

        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#搭建项目"><span class="toc-number">1.</span> <span class="toc-text">搭建项目</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#使用脚手架创建项目"><span class="toc-number">1.1.</span> <span class="toc-text">使用脚手架创建项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#安装依赖"><span class="toc-number">1.2.</span> <span class="toc-text">安装依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用antd"><span class="toc-number">1.3.</span> <span class="toc-text">使用antd</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#redux-使用"><span class="toc-number">2.</span> <span class="toc-text">redux 使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#创建-store"><span class="toc-number">2.1.</span> <span class="toc-text">创建 store</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建reducer"><span class="toc-number">2.2.</span> <span class="toc-text">创建reducer</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#组件中使用store"><span class="toc-number">2.3.</span> <span class="toc-text">组件中使用store</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react-redux-使用"><span class="toc-number">3.</span> <span class="toc-text">react-redux 使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#在全局js-使用provider"><span class="toc-number">3.1.</span> <span class="toc-text">在全局js 使用provider</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用connect-导出组件"><span class="toc-number">3.2.</span> <span class="toc-text">使用connect 导出组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#添加mapStateToProps-关系映射"><span class="toc-number">3.3.</span> <span class="toc-text">添加mapStateToProps 关系映射</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#添加dispachToProps"><span class="toc-number">3.4.</span> <span class="toc-text">添加dispachToProps</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用connect-连接"><span class="toc-number">3.5.</span> <span class="toc-text">使用connect 连接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#在组件使用"><span class="toc-number">3.6.</span> <span class="toc-text">在组件使用</span></a></li></ol></li></ol>
        
    </div>
</aside>

</header>

        <div id="content" class="content">
            <div id="wrapper" class="wrapper" style="max-width: 800px">
                <article class="article" itemscope itemprop="blogPost">
    
    <header class="article-header">
        
        <h1 itemprop="name">
            react-redux的使用
        </h1>
        
        <div class="article-meta clearfix">
            <a class="article-date" href="http://zhenglide.gitee.io/homepage/2020/08/13/react-redux%E7%9A%84%E4%BD%BF%E7%94%A8/index.html">
    
    <i class="icon-calendar"></i>
    
    <time datetime="2020-08-13T03:28:25.000Z" itemprop="datePublished">2020-08-13</time>
</a>

            
<div class="article-tag-list">
    <i class="icon-tag"></i>
    <a class="article-tag-link" href="/homepage/tags/react/" rel="tag">react</a>, <a class="article-tag-link" href="/homepage/tags/redux/" rel="tag">redux</a>
</div>


        </div>
    </header>
    
    <section class="article-body markdown-body">
        
        <p>本文如何搭建react-redux 以及使用方式</p>
<a id="more"></a>

<h2 id="搭建项目"><a href="#搭建项目" class="headerlink" title="搭建项目"></a>搭建项目</h2><h3 id="使用脚手架创建项目"><a href="#使用脚手架创建项目" class="headerlink" title="使用脚手架创建项目"></a>使用脚手架创建项目</h3><p><code>create-react-app react-redux-demo01</code></p>
<h3 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h3><p><code>yarn add antd</code> 安装蚂蚁金服ui 框架</p>
<p><code>yarn add redux</code> 安装 redux  </p>
<p><code>yarn add react-redux</code> 安装react-redux</p>
<h3 id="使用antd"><a href="#使用antd" class="headerlink" title="使用antd"></a>使用antd</h3><p>在 index.css 引入 </p>
<pre><code class="scss">@import &#39;~antd/dist/antd.css&#39;;</code></pre>
<h2 id="redux-使用"><a href="#redux-使用" class="headerlink" title="redux 使用"></a>redux 使用</h2><h3 id="创建-store"><a href="#创建-store" class="headerlink" title="创建 store"></a>创建 store</h3><pre><code class="jsx">import  {createStore} from &#39;redux&#39;;
import {todoListReducer} from &#39;./reducer&#39;;
const store =  createStore(todoListReducer);

export default store;</code></pre>
<h3 id="创建reducer"><a href="#创建reducer" class="headerlink" title="创建reducer"></a>创建reducer</h3><pre><code class="js">const defaultState={
    inputValue : &#39;Write Something&#39;,
    list:[
        &#39;早上4点起床，锻炼身体&#39;,
        &#39;中午下班游泳一小时&#39;
    ]
};
export const todoListReducer = (state = defaultState , action) =&gt; {
    var newState = JSON.parse(JSON.stringify(state));
    switch (action.type) {
        case &#39;INPUT_CHANGE&#39;:
            newState.inputValue = action.value
            return newState
        case &#39;ADD_ITEM&#39;:

            newState.list.push(newState.inputValue)
            return newState
        case &#39;DELETE_ITEM&#39;:

            newState.list.splice(action.value,1)
            return newState
        default:
            return state
    }
}</code></pre>
<h3 id="组件中使用store"><a href="#组件中使用store" class="headerlink" title="组件中使用store"></a>组件中使用store</h3><pre><code class="js">import React, { Component } from &#39;react&#39;;
import {Button, Input,List} from &#39;antd&#39;
import &quot;./TodoList.css&quot;;
import store from &quot;./store&quot;
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
    }
    render() { 
        return ( 
        &lt;div className=&quot;warpper&quot;&gt;
              &lt;div&gt;
             &lt;Input style={{width:"250px"}}
             /&gt;
             &lt;Button type=&quot;primary&quot;  &gt;增加&lt;/Button&gt;
        &lt;/div&gt;
        &lt;div style={{margin:'10px',width:'300px'}}&gt;
              &lt;List bordered 
                  dataSource={this.state.list}
                  renderItem ={item =&gt; (&lt;List.Item&gt;{item}&lt;/List.Item&gt;)}
               &gt;&lt;/List&gt;
        &lt;/div&gt;

        &lt;/div&gt; );
    }
}

export default TodoList;</code></pre>
<h2 id="react-redux-使用"><a href="#react-redux-使用" class="headerlink" title="react-redux 使用"></a>react-redux 使用</h2><h3 id="在全局js-使用provider"><a href="#在全局js-使用provider" class="headerlink" title="在全局js 使用provider"></a>在全局js 使用provider</h3><pre><code class="js">import TodoList from &#39;./TodoList&#39;;
import { Provider } from &#39;react-redux&#39;
import store from &quot;./store&quot;
ReactDOM.render(
  &lt;Provider store={store}&gt;
    &lt;TodoList /&gt;
  &lt;/Provider&gt;,
  document.getElementById(&#39;root&#39;)
);</code></pre>
<h3 id="使用connect-导出组件"><a href="#使用connect-导出组件" class="headerlink" title="使用connect 导出组件"></a>使用connect 导出组件</h3><h3 id="添加mapStateToProps-关系映射"><a href="#添加mapStateToProps-关系映射" class="headerlink" title="添加mapStateToProps 关系映射"></a>添加mapStateToProps 关系映射</h3><pre><code class="js">(state)=&gt; {
    return {
         list:state.list,
         inputValue:state.inputValue
    }
}</code></pre>
<h3 id="添加dispachToProps"><a href="#添加dispachToProps" class="headerlink" title="添加dispachToProps"></a>添加dispachToProps</h3><pre><code class="js">(dispatch)=&gt; { 

    return {
         inputValueChange(e){
            const actions ={
                type:&quot;INPUT_CHANGE&quot;,
                value:e.target.value
           }
           store.dispatch(actions)
         },
         addItem() {
            const actions ={
                type:&quot;ADD_ITEM&quot;

           }  
           store.dispatch(actions)
         },
         deleteItem(index){
            const actions ={
                type:&quot;DELETE_ITEM&quot;,
                value:index
           }  
           store.dispatch(actions)
         }
    }
}</code></pre>
<h3 id="使用connect-连接"><a href="#使用connect-连接" class="headerlink" title="使用connect 连接"></a>使用connect 连接</h3><pre><code class="js">export default connect((state)=&gt; {
    return {
         list:state.list,
         inputValue:state.inputValue
    }
}, (dispatch)=&gt; { 

    return {
         inputValueChange(e){
            const actions ={
                type:&quot;INPUT_CHANGE&quot;,
                value:e.target.value
           }
           store.dispatch(actions)
         },
         addItem() {
            const actions ={
                type:&quot;ADD_ITEM&quot;

           }  
           store.dispatch(actions)
         },
         deleteItem(index){
            const actions ={
                type:&quot;DELETE_ITEM&quot;,
                value:index
           }  
           store.dispatch(actions)
         }
    }
})(TodoList);</code></pre>
<h3 id="在组件使用"><a href="#在组件使用" class="headerlink" title="在组件使用"></a>在组件使用</h3><pre><code class="js">  render() { 
        return ( 
        &lt;div className=&quot;warpper&quot;&gt;
              &lt;div&gt;
             &lt;Input placeholder={this.props.inputValue} value={this.props.inputValue} onChange={this.props.inputValueChange.bind(this)} style={{width:"250px"}}
             /&gt;
             &lt;Button type=&quot;primary&quot; onClick={this.props.addItem.bind(this)} &gt;增加&lt;/Button&gt;
        &lt;/div&gt;
        &lt;div style={{margin:'10px',width:'300px'}}&gt;
              &lt;List bordered 
                  dataSource={this.props.list}
                  renderItem ={(item,index) =&gt; (&lt;List.Item actions={[&lt;a  onClick={this.props.deleteItem.bind(this,index)}&gt;删除&lt;/a&gt;]}&gt;{item}&lt;/List.Item&gt;)}
               &gt;&lt;/List&gt;
        &lt;/div&gt;

        &lt;/div&gt; );
    }</code></pre>

        
    </section>
</article>



<a id="pagenext" href="/homepage/2020/06/12/%E5%9F%BA%E4%BA%8Etaro-ui%E5%BC%80%E5%8F%91%E7%9A%84%E6%B4%BB%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8/" class="article-next" title="基于taro-ui开发的活动选择器"><i class="icon-arrow-right"></i></a>


<a id="pageprev" href="/homepage/2020/09/22/docker%E6%96%87%E6%A1%A3/" class="article-prev" title="docker文档"><i class="icon-arrow-left"></i></a>




            </div>
        </div>
        <footer class="footer">
    Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>, Theme by <a href="https://github.com/sanonz/hexo-theme-concise" target="_blank">Concise</a>

    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b13bb4c2ef8300062aab9732bd22eae0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    
</footer>

    </main>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var nodes = {
            nav: $('#nav'),
            aside: $('#aside'),
            asideInner: $('#aside-inner'),
            navInner: $('#nav-inner')
        };

        var doing = false;
        nodes.asideInner.on('webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
            if (nodes.aside.hasClass('mobile-open')) {
                nodes.aside.removeClass('mobile-open');
            } else {
                nodes.aside.removeClass('mobile-close panel-show');
            }
            doing = false;
        });
        $('#open-panel, #aside-mask').on('click', function() {
            if (doing) {
                return;
            }

            if (nodes.aside.hasClass('panel-show')) {
                nodes.aside.addClass('mobile-close');
            } else {
                nodes.aside.addClass('mobile-open panel-show');
            }
        });
        $('#open-menus').on('click', function() {
            nodes.navInner.slideToggle();
        });

        if (window.innerWidth <= 960) {
            setTimeout(function() {
                nodes.navInner.slideUp();
            }, 3000);
        }
    });
    </script>
    
        
<script src="/homepage/js/scrollspy.min.js"></script>

        <script type="text/javascript">
        $(document.body).scrollspy({target: '#aside-inner'});

        $(window).on('resize', function() {
            var hw = $('#header').width();
            var ww = $('#wrapper').width();
            var space = ($(this).width() - hw - ww) / 2 / 2;

            var pageprev = $('#pageprev');
            var pagenext = $('#pagenext');
            var avg = (pageprev.width() + pagenext.width()) / 2

            if(space > avg) {
                var len = space - avg / 2;
                var styles = {position: 'fixed', top: '50%', marginTop: - (pageprev.width() + pagenext.width()) / 4}
                pageprev.css($.extend({left: hw + len}, styles));
                pagenext.css($.extend({right: len}, styles));
            } else {
                pageprev.removeAttr('style');
                pagenext.removeAttr('style');
            }
        }).trigger('resize');
        </script>
    

</body>
</html>
